<template>
  <scroll-view scroll-y @scrolltolower="handletolower" class="album">
    <view class="album-swiper">
      <swiper  autoplay indicator-dots circular>
        <swiper-item v-for="item in banner" :key="item.id">
          <img :src="item.thumb" alt="">
        </swiper-item>
      </swiper>
    </view>
    <view class="album-list">
      <navigator class="album-item" v-for="item in album" :key="item.id" url="/pages/album/index">
        <view class="item-img"> 
          <img :src="item.cover" alt="">
        </view>
        <view class="item-info">
          <view class="info-name">{{item.name}}</view>
          <view class="info-tag" v-for="(item,index) in item.tag" :key="index">{{item}}</view>
        </view>
      </navigator>
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: 'album',
  data() { 
    return {
      params:{
        limit:30,
        order:"new",
        skip:0
      },
      banner:[],
      album:[],
      hasmore:true
    }
  },
  mounted(){
    uni.setNavigationBarTitle({title:"专题"})
    this.getList()
  },
  methods:{
    getList(){
      this.request({
        url:"http://service.picasso.adesk.com/v1/wallpaper/album",
        data:this.params
      }).then(res=>{
        if(this.banner.length===0){
          this.banner = res.data.res.banner
        }
        if(res.data.res.album.length===0){
          this.hasmore = false
          return
        }
        this.album = [...this.album, ...res.data.res.album]
      })
    },
    handletolower(){
      if(this.hasmore){
        this.params.skip += this.params.limit
        this.getList()
      }else{
        uni.showToast({
          title:'没有数据了',
          icon:'none'
        })
      }
    }
  }
 }
</script>

<style lang="scss" scoped>
  .album{
    height: calc(100vh - 36px);
  }
  .item-info{
    display: flex;
    background-color: pink;
  }
  .info-name{
    flex: 1;

  }
  .info-tag{
    font-size: 12px;
    color: #fff;
    text-align: right;
  }
</style>